<template>
  <v-app id="inspire">
    <router-view></router-view>
    <v-app-bar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      app
      color="blue darken-3"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title
        style="width: 300px"
        class="ml-0 pl-4"
      >
        <span class="hidden-sm-and-down">Wheel Chair</span>
      </v-toolbar-title>
      <v-text-field
        flat
        solo-inverted
        hide-details
        prepend-inner-icon="mdi-magnify"
        label="Search"
        class="hidden-sm-and-down"
      />
      <v-spacer />
      <router-link to="/login">
      <v-btn large color="primary"
             v-if="userName == null"
      >Login
      </v-btn>
      </router-link>
      <router-link to="/register">
      <v-btn large color="primary"
             v-if="userName == null"
      >Register
      </v-btn>
      </router-link>

      <router-link to="/workspace">
        <v-btn color="primary"
               v-if="userName !== null"
        >Workspace
        </v-btn>
      </router-link>

      <router-link to="/adminApprove">
        <v-btn large color="primary"
               v-if="userName === 'admin'"
        >Approve Meeting
        </v-btn>
      </router-link>
        <v-menu open-on-hover offset-y>
            <template v-slot:activator="{ on }">
              <v-btn
                color="primary"
                dark
                v-on="on"
                v-if="userName != null"
              >
                {{userName}}
              </v-btn>
            </template>
            <v-list v-if="now">
              <v-list-item
                v-for="(item, index) in dropdownItems"
                :key="index"
                @click="item.function"
              >
                <v-list-item-title >{{ item.title }}</v-list-item-title>
              </v-list-item>
            </v-list>
        </v-menu>
      <v-btn
        icon
        large
        @click="openWorkspace"
      >
        <v-avatar
          size="32px"
          item
        >
          <v-img
            src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
            alt="Vuetify"
          /></v-avatar>
      </v-btn>
    </v-app-bar>
  </v-app>
</template>

<script>
import store from '../store'
export default {
  methods: {
    openApplyPage: function () {
      this.$router.replace({path: '/applyMeeting'})
    },
    openWorkspace: function () {
      this.$router.replace({path: '/workspace'})
    },
    toProfile () {
      this.$router.replace({path: '/profile'})
    },
    logout () {
      this.$confirm('You want to logout?', 'Confirm', {
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: 'Logout!'
        })
        this.$store.commit('logout')
        this.$router.push({path: '/'})
        location.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: 'Cancelled'
        })
      })
    }
  },
  props: {
    source: String
  },
  data () {
    return {
      userName: store.state.userName, // userDetails.getUsername()
      now: store.state.now,
      drawer: null,
      dropdownItems: [
        {title: 'Profile', function: this.toProfile},
        {title: 'Logout', function: this.logout}
      ],
      items: [
        {icon: 'lightbulb_outline', text: 'News', router: '/news'},
        {
          icon: 'touch_app',
          'icon-alt': 'mdi-chevron-down',
          text: 'Work Space',
          router: '/workspace',
          model: true,
          children: [
            { icon: 'lightbulb_outline',text: 'New Invitation', router: '/newInvitation'},
            { icon: 'lightbulb_outline',text: 'Review', router: '/reviewDashboard'},
            { icon: 'lightbulb_outline',text: 'My Contribution', router: '/myContribution'},
            { icon: 'lightbulb_outline',text: 'Invitation I Sent', router: '/invitationISent'},
            {icon: 'lightbulb_outline', text: 'Rebuttal Dashboard', router: '/rebuttalDashboard'},
          ]
        },
        {icon: 'add', text: 'Apply For A Meeting', router: '/applyMeeting'},
        {icon: 'lightbulb_outline', text: 'New Discussion', router: '/createDiscussion'},
        {icon: 'lightbulb_outline', text: 'Discussion', router: '/discussion'},
        {
          icon: 'mdi-chevron-up',
          'icon-alt': 'mdi-chevron-down',
          text: '乱七八糟的新功能',
          router: 'login',
          model: true,
          children: [
            {icon: 'mdi-plus', text: 'Create label', router: '/login'}
          ]
        }
      ]
    }
  },
  created () {
  }
}
</script>
<style>
  a{
    text-decoration: none;
  }
</style>
